<!--知识点易出-->
<template>
<!--    切换最容易考的知识点和不经常考的知识点-->
    <el-dropdown style="padding: 50px 32px 0 32px;"  @command="handleCommand">
        <el-button type="primary">
            知识点类型<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item divided command="high">最经常考的知识点</el-dropdown-item>
                <el-dropdown-item divided command="low">最少考的知识点</el-dropdown-item>
                <!--                    <el-dropdown-item divided>双皮奶</el-dropdown-item>-->
                <!--                    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>-->
            </el-dropdown-menu>
        </template>
    </el-dropdown>

    <div id="main" style="width:1000px;height:600px;margin: 10px auto;"></div>
</template>
<script>
    import request from "../utils/request";

    const echarts = require('echarts');

    export default{
        data () {
            return {
                search: '',
                currentPage: 1,
                pageSize: 100,
                total: 0,
                title: '校招知识点出题率统计（热门）',
                tableData: [],
                isMax: true,
                dataMax: [ ['score', 'amount', 'knowledge']],
                dataMin: [ ['score', 'amount', 'knowledge']],
                data0: [ ['score', 'amount', 'knowledge']],
            };
        },
        created() {

        },
        methods: {
            initCharts () {
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;


                request.get("/knowledge",{ // 请求/wordCloud接口
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search
                    }
                }).then(res=>{
                    // console.log(res);
                    this.data0=[ ['score', 'amount', 'knowledge']];
                    if(this.isMax === true) {
                        var mx = res.data.records[0]['num'];
                        for(var i=9;i>=0;i--) {
                            var str=res.data.records[i]['knowledge']+'('+res.data.records[i]['knowledgeEn']+')';
                            var score=res.data.records[i]['num']*1.0/mx*100;
                            var num=res.data.records[i]['num']
                            this.data0.push([score,num,str]);
                        }
                    } else {
                        var len=res.data.records.length
                        var mx = res.data.records[len-1-10]['num'];
                        for (var i = len-1-10; i <len; i++) {
                            var str = res.data.records[i]['knowledge'] + '(' + res.data.records[i]['knowledgeEn'] + ')';
                            var score = (res.data.records[i]['num'] * 1.0 / mx * 100)*0.25;
                            var num = res.data.records[i]['num']
                            this.data0.push([score, num, str]);
                        }
                    }



                    option = {
                        title: {
                            text: this.title,
                            subtext: '数据截止至: 2021.08.06'
                        },
                        toolbox: {  // 显示保存图片的按钮
                            show: true,
                            orient: 'horizontal',
                            bottom: 10,
                            right: 20,
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        dataset: {
                            // source: [
                            //     ['score', 'amount', 'product'],
                            //     [89.3, 58212, 'Matcha Latte'],
                            //     [57.1, 78254, 'Milk Tea'],
                            //     [74.4, 41032, 'Cheese Cocoa'],
                            //     [50.1, 12755, 'Cheese Brownie'],
                            //     [89.7, 20145, 'Matcha Cocoa'],
                            //     [68.1, 79146, 'Tea'],
                            //     [19.6, 91852, 'Orange Juice'],
                            //     [10.6, 101852, 'Lemon Juice'],
                            //     [32.7, 20112, 'Walnut Brownie']
                            // ]
                            source: this.data0
                        },
                        grid: {containLabel: true},
                        xAxis: {name: '出题数量'},
                        yAxis: {type: 'category'},
                        visualMap: {
                            orient: 'horizontal',
                            left: 'center',
                            min: 10,
                            max: 100,
                            text: ['高出题率', '低出题率'],
                            // Map the score column to color
                            dimension: 0,
                            inRange: {
                                color: ['#65B581', '#FFCE34', '#FD665F']
                            }
                        },
                        series: [
                            {
                                type: 'bar',
                                encode: {
                                    // Map the "amount" column to X axis.
                                    x: 'amount',
                                    // Map the "product" column to Y axis
                                    y: 'knowledge'
                                }
                            }
                        ]
                    };

                    option && myChart.setOption(option);

                })

            },

            handleCommand(command) {
                if(command==='high') {
                    this.isMax=true;
                    this.title='校招知识点出题率统计（热门）';

                } else {
                    this.isMax=false;
                    this.title='校招知识点出题率统计（偏冷）';
                }
                this.initCharts();
                // console.log(this.type)
            }

        },
        mounted () {
            this.initCharts();
            // console.log("mounted")
        }
    }
</script>

<style scoped>

</style>